<template>
	<view class="content">
		<view class='header'>
			<pagehead :title="title" :titlecolor='titlecolor' :isback='isback'></pagehead>
		</view>
		<view class="topblock">
			<view class="time">
				<view class="year">
					{{year}}年
				</view>
				<view class="month" @click="timeshow">
					<view class="monthtext">
						{{month}}月
					</view>
					<view class="icon">
						<image src="/static/images/xiangxia.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="info">
				<view class="infobox">
					<view class="tip">
						收入
					</view>
					<view class="price">
						<text class='icon'>￥</text>123456
					</view>
				</view>
				<view class="infobox" style='margin-left:40rpx;'>
					<view class="tip">
						支出
					</view>
					<view class="price">
						<text class='icon'>￥</text>123456
					</view>
				</view>
			</view>
		</view>
		<view class='typebox'>
			<view class='types'>
				<view class='type' v-for='(item,index) in typelist' :key="'typelist'+index" @click='typeselect(index)' :class="{'active':typeactive==index}">
					{{item}}
				</view>
			</view>
		</view>
		<view class='details'>
			<view class='detail'>
				<veiw class='detailleft'>
					<view class='text'>商品兑换</view>
					<view class='time'>2022-02-12 13:42</view>
				</veiw>
				<view class='detailright'>
					<view class='price'>-12345</view>
				</view>
			</view>
			<view class='detail'>
				<veiw class='detailleft'>
					<view class='text'>商品兑换</view>
					<view class='time'>2022-02-12 13:42</view>
				</veiw>
				<view class='detailright'>
					<view class='price'>-12345</view>
				</view>
			</view>
			<view class='detail'>
				<veiw class='detailleft'>
					<view class='text'>商品兑换</view>
					<view class='time'>2022-02-12 13:42</view>
				</veiw>
				<view class='detailright'>
					<view class='price'>-12345</view>
				</view>
			</view>
			<view class='detail'>
				<veiw class='detailleft'>
					<view class='text'>商品兑换</view>
					<view class='time'>2022-02-12 13:42</view>
				</veiw>
				<view class='detailright'>
					<view class='price'>-12345</view>
				</view>
			</view>
			<view class='detail'>
				<veiw class='detailleft'>
					<view class='text'>商品兑换</view>
					<view class='time'>2022-02-12 13:42</view>
				</veiw>
				<view class='detailright'>
					<view class='price'>-12345</view>
				</view>
			</view>
		</view>

		<view class='timeslect' v-if="visible">
			<view class='buttons'>
				<view @click="timeclose">取消</view>
				<view @click="timeclose">确定</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			console.log(month)
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			return {
				// 页面标题
				title: '资金明细',
				titlecolor: 'black',
				isback: true,
				// 筛选
				typelist: [
					'全部',
					'商品兑换',
					'分红',
					'提成收入'
				],
				typeactive:0,
				// 时间选择
				years,
				year,
				months,
				month,
				value: [9999, month - 1, day - 1],
				visible: false,
				indicatorStyle: `height: 50px;`
			}
		},
		onReady() {

		},
		methods: {
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
			},
			timeshow: function() {
				this.visible = true
			},
			timeclose: function() {
				this.visible = false
			},
			typeselect: function(value) {
				this.typeactive=value
			}

		}
	}
</script>

<style lang='less' scoped>
	.content {
		background-color: #F2F2F2;
		min-height: 100vh;
		padding-top: 1rpx;

		.header {
			background-color: #fff;
			position: fixed;
			top: 0rpx;
			left: 0rpx;
		}

		.topblock {
			width: 100%;

			background-color: #fff;
			display: flex;
			box-sizing: border-box;
			padding: 0rpx 30rpx;
			padding-top: 131rpx;
			justify-content: space-between;
			padding-bottom: 36rpx;

			.time {
				color: #444444;

				.year {
					font-size: 24rpx;
				}

				.month {
					margin-top: 20rpx;
					display: flex;

					.monthtext {
						font-size: 42rpx;
					}

					.icon {
						image {
							width: 27rpx;
							height: 15rpx;
						}

					}

				}
			}

			.info {
				display: flex;
				justify-content: space-between;

				.infobox {
					.tip {
						color: #999999;
						font-size: 24rpx;
					}

					.price {
						margin-top: 20rpx;
						font-size: 42rpx;
						color: #444444;

						.icon {
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.typebox {
			height: 62rpx;
			overflow-y: hidden;
			margin: 40rpx auto;

			.types {
				overflow-x: scroll;
				white-space: nowrap;
				padding-bottom: 20rpx;
				display: flex;
				padding-right: 20rpx;

				.type {
					line-height: 58rpx;
					padding: 0rpx 37rpx;
					border-radius: 26rpx;
					text-align: center;
					font-size: 30rpx;
					margin-left: 30rpx;
					box-sizing: border-box;
					background-color: rgba(0, 0, 0, 0);
					color: #999999;
					border: 2rpx solid #999999;
				}

				.active {
					background-color: #2F70F1;
					color: #fff;
					border: none;
				}
			}
		}

		.details {
			width: 686rpx;
			margin: 0px auto;
			border-radius: 30rpx;
			background-color: #fff;

			.detail {
				width: 100%;
				box-sizing: border-box;
				padding: 29rpx 31rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #EEEEEE;

				.detailleft {
					.text {
						color: #444444;
						font-size: 28rpx;
					}

					.time {
						margin-top: 27rpx;
						color: #999999;
						font-size: 20rpx;
					}
				}

				.detailright {
					.price {
						margin-top: 20rpx;
						line-height: 60rpx;
					}
				}
			}

			.detail:last-child {
				border: none;
			}
		}

		.timeslect {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			background-color: rgba(0, 0, 0, .7);

			.buttons {
				width: 750rpx;
				line-height: 100rpx;
				display: flex;
				box-sizing: border-box;
				padding: 0rpx 30rpx;
				justify-content: space-between;
				position: fixed;
				background-color: #fff;
				bottom: 400rpx;
				left: 0rpx;
			}

			.picker-view {
				width: 750rpx;
				height: 400rpx;
				position: fixed;
				bottom: 0rpx;
				left: 0rpx;
				background-color: #fff;

				.item {
					height: 50px;
					line-height: 50px;
					align-items: center;
					justify-content: center;
					text-align: center;
					color: #333;
					background-color: #fff;
				}
			}
		}
	}
</style>
